<!-- 文章分类 -->
<script setup>

import Timeline from '@/components/Timeline.vue'

import moment from 'moment'
import { useBreadsStore } from '@/stores'
import { onMounted, ref } from 'vue'
const { setBreadCrumbs } = useBreadsStore()

setBreadCrumbs([
  { title: 'category', path: '/article/category' },
])

const showLessPanel = ref(false)
const artCateList = ref([])
const activities = ref([])

onMounted(() => getArticleCategoryData())

async function getArticleCategoryData() {
  let data = await getArticleCategoryDataFromLocal()

  let sortedData = data.sort((a, b) => b.pinned - a.pinned || new Date(b.createTime) - new Date(a.createTime))
  artCateList.value = sortedData.filter(v => !v.parentId)
  activities.value = data.map(v => {
    return {
      dotColor: v.parentId ? '#75972b' : '#047533',
      content: v.title,
      timestamp: moment(v.createTime).format('YYYY-MM-DD')
    }
  }).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
}

async function getArticleCategoryDataFromLocal() {
  return (await import('@/_data~/cateList')).default
}
</script>

<template>
  <div class="views-content">
    <div class="section-wrapper">
      <div class="section-header">
        <div class="section-title">Category</div>
      </div>
      <div class="byline">
        <div class="icon icon-toggle" @click="showLessPanel = !showLessPanel"></div>
        <b>随笔及笔记，偶尔更新</b>
        <p>{{ $t('view_category.sortRule') }}</p>
      </div>
      <ul class="less-content" v-if="showLessPanel">
        <li v-for="v in artCateList" :key="v.id" class="list-item-less">
          <RouterLink :to='{ path: `/article/${v.title}/index` }'>
            <div class="list-title-less"> {{ v.title + ` (${v.count})` }} </div>
            <div class="list-date">{{ moment(v.createTime).format("YYYY-MM-DD") }}</div>
          </RouterLink>
        </li>
      </ul>
      <ul class="section-content" v-else>
        <li v-for="v in artCateList" :key="v.id">
          <RouterLink :to='{ path: `/article/${v.title}/index` }' class="list-item">
            <div class="item-header">
              <span class="list-title"> {{ v.title }} </span>
              <div class="list-meta">
                <div class="icon icon-pinned" v-if="v.pinned"></div>
                <span class="list-summary"> {{ $t('common.total') + ' ' + v.count }} </span>
                <span class="list-date">{{ moment(v.createTime).format("YYYY-MM-DD") }}</span>
              </div>
            </div>
            <div class="list-desc"> {{ v.desc }}</div>
            <div class="list-footer" v-if="v.children && v.children.length">
              <div class="subtitle">{{ $t('view_category.subCategory') }}</div>
              <div class="sub-category">
                <div v-for="s in v.children" :key="s.id">
                  <RouterLink :to='{ path: `/article/${s.title}/index` }'>
                    <div class="sub-title"> {{ s.title + " (" + s.count + ")" }}</div>
                  </RouterLink>
                </div>
              </div>
            </div>
          </RouterLink>
        </li>
      </ul>
    </div>
    <div class="section-wrapper timeline">
      <div class="section-header">
        <div class="section-title">Timeline</div>
      </div>
      <Timeline :contents="activities" class="timeline-content" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.views-content {
  flex: 1;
  margin: 50px 0px;
  width: 60%;
  margin-left: 20px;

  @media screen and (max-width: 768px) {
    width: 100%;
    margin-left: 0;
  }

  @media screen and (min-width: 769px) and (max-width: 882px) {
    width: 80%;
    margin-left: 0;
  }

  @media screen and (min-width: 883px) and (max-width: 992px) {
    width: 70%;
    margin-left: 0px;
  }

}

.section-wrapper {
  padding: 10px;
  margin-bottom: 20px;
  background-color: var(--view-category-bgc);
  box-shadow: 0px 4px 7px rgba(37, 44, 24, 0.427);
  border: 1px solid var(--border-primary);
  min-height: 600px;

  @media screen and (max-width: 436px) {
    padding: 2px;
  }
}

.section-header {
  margin: 10px 0 20px;
  padding: 10px 0;
  padding-bottom: 10px;
  background: var(--view-category-title-bgc);
  box-shadow: 0px 4px 7px rgba(95, 87, 63, 0.73);

}

.icon {
  mask-repeat: no-repeat;
  mask-position: center;
  display: inline-block;
}

.icon-toggle {
  width: 20px;
  height: 20px;
  mask-image: url('/static/svg/toggle.svg');
  background-color: #7c972b;
  cursor: pointer;
}

.icon-pinned {
  width: 16px;
  height: 16px;
  mask-image: url('/static/svg/pin.svg');
  background-color: #7a972b;
  margin-right: .5rem;
}


.section-title {
  font-family: "Oswald", "Bookman Old Style", serif;
  font-size: 2.50rem;
  font-weight: bold;
  border-bottom: 1px solid rgb(12, 16, 94);
  width: max-content;
  margin: auto;
  color: rgb(1, 58, 71);
}

.section-content {
  padding-bottom: 10px;
}

.byline {
  text-align: right;
  margin: 10px 15px 0;
  font-size: 14px;
  color: #838883;
  display: flex;
  justify-content: space-between;
}

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 5px;
}

.list-item {
  display: block;
  min-height: 100px;
  margin: 10px 10px;
  padding: 0 10px;
  background-color: var(--view-category-bgc-01);
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
}

.item-header {
  border-bottom: 1px solid #88943d;
  margin-bottom: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.list-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-02);
  margin-right: 1em;
}

.list-meta {
  display: flex;
  align-items: center;
}

.list-date {
  margin-left: 5px;
  font-size: 14px;
  color: #838883;
}

.list-desc {
  font-size: 14px;
  min-height: 40px;
}

.list-footer {
  margin-top: 15px;
  padding-top: 5px;

  .subtitle {
    border-left: 2px solid #00bc77;
    font-size: 14px;
    color: var(--text-02);
    padding: 0 5px;
  }

  .sub-category {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .sub-title {
      padding: 5px;
      margin: 5px;
      background-color: var(--bgc-01);
      box-shadow: 3px 4px 4px rgba(27, 50, 32, 0.474);
    }
  }
}

.timeline-content {
  margin-left: 10%;
  padding-bottom: 20px;
}


.less-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.list-item-less {
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
  padding: 10px;
  margin: 10px;
  background-color: var(--view-category-bgc-01);
}

.list-title-less {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-02);
  margin-right: 1em;
}
</style>